https://madokamagicausa.com/assets/js/madomagi2023.js?v3

1'use strict';
2const MainMovie = () => {
3  new PLAYER_MODULE_YOUTUBE({
4    id: 'PV_Player',
5    videoid: mainVid,
6    responsive: true,
7    muted: true,
8    playerVars: {
9      autoplay: 1,
10      loop: 1,
11      controls: 0,
12    },
13  });
14};
15
16let movieSlide;
17const MovieSlide = () => {
18  let slide = $('.movie_swiper .swiper-slide').length;
19  if (slide > 1) {
20    movieSlide = new Swiper('.movie_swiper', {
21      spaceBetween: 10,
22      loop: true,
23      slidesPerView: '1',
24      centeredSlides: true,
25      autoplay: {
26        disableOnInteraction: false, // ユーザーアクション後も自動再生
27      },
28      speed: 1200,
29      followFinger: false,
30      navigation: {
31        nextEl: '.swiper-button-next',
32        prevEl: '.swiper-button-prev',
33      },
34      breakpoints: {
35        768: {
36          spaceBetween: 8,
37          slidesPerView: 'auto',
38        },
39      },
40      on: {
41        init: function () {
42          $('.movie_swiper').addClass('is-slide-on');
43        },
44      },
45    });
46  }
47};
48
49const Modal = () => {
50  const _template =
51    '\n  <section class="m-modal {{ defaultClassName }}" id="{{ id }}" data-modal-type>\n    <div class="m-modal__bg"></div>\n    <div class="m-modal__content">\n      {{ content }}\n    </div>\n    <div class="m-modal__close-head">\n      <div class="m-modal__close-deco">\n        <div class="m-modal__close-deco-item">\n          PUELLA MAGI MADOKA MAGICA\n        </div>\n        <div class="m-modal__close-deco-item">\n          PUELLA MAGI MADOKA MAGICA\n        </div>\n      </div>\n      <div class="m-modal__close-btn" data-modal-ui-close>\n        <div class="m-modal__close-btn-caption">CLOSE</div>\n      </div>\n    </div>\n  </section>';
52
53  new MODAL_MODULE({
54    customModalHtml: _template,
55    on: {
56      afterOpen: function (data, target, state, elem) {
57        let mcontent = elem.modalContent[0];
58        if ($(mcontent).find('.js-change_visual').length >= 2) {
59          KvChange.setting($(mcontent).find('.js-change_visual').length);
60          KvChange.click($(mcontent).find('.js-change_visual').length);
61        }
62        if (movieSlide) {
63          movieSlide.autoplay.stop();
64        }
65      },
66      afterClose: function () {
67        if (KvChange.settime != undefined) {
68          clearTimeout(KvChange.settime);
69          KvChange.count = 0;
70        }
71        if (movieSlide) {
72          movieSlide.autoplay.start();
73        }
74      },
75    },
76  });
77};
78
79const KvChange = {
80  count: 0,
81  settime: undefined,
82  click(length) {
83    $('.js-change-kv').on('click', (e) => {
84      if ($(e.currentTarget).data('change') >= length - 1) {
85        this.count = 0;
86      } else {
87        this.count = $(e.currentTarget).data('change') + 1;
88      }
89      clearTimeout(KvChange.settime);
90      $('.js-change_visual').removeClass('is-current');
91      $('[data-change]').removeClass('is-current');
92      $('[data-change="' + this.count + '"]').addClass('is-current');
93      $('.js-change_visual').eq(this.count).addClass('is-current');
94      setTimeout(() => {
95        this.setting(length);
96      }, 1000);
97    });
98  },
99  setting(length) {
100    $('[data-change="' + this.count + '"]').addClass('is-current');
101    $('.js-change_visual').eq(this.count).addClass('is-current');
102    this.settime = setInterval(() => {
103      if (this.count == length - 1) {
104        this.count = 0;
105      } else {
106        this.count++;
107      }
108      $('.js-change_visual').removeClass('is-current');
109      $('.js-change_visual').eq(this.count).addClass('is-current');
110      $('[data-change]').removeClass('is-current');
111      $('[data-change="' + this.count + '"]').addClass('is-current');
112    }, 5000);
113  },
114};
115
116let ScrollModule = null;
117const Scroll = () => {
118  ScrollModule = new SCROLL_EFFECT_MODULE({
119    elem: '[data-scroll]',
120    firstElem: '.js-scroll--first',
121    displayRatio: 0.8,
122    displayReverse: false,
123    firstDelay: 600,
124    firstDelaySteps: 100,
125    addClassNameActive: 'is-active',
126  });
127};
128
129const AncorScroll = {
130  hash() {
131    let _hash;
132    $('a[href^="#"]').on('click', function () {
133      let adjust = 0;
134      _hash = $(this).attr('href');
135      if ($('.p-hero').length) {
136        if ($(window).width() >= 768) {
137          if (_hash != '#') {
138            adjust = -40 + -$('.l-menu').height();
139          }
140        } else {
141          if (_hash != '#') {
142            adjust = -40 + -$('.l-menu__btn').height();
143          }
144        }
145      }
146
147      let speed = 1000;
148      let href = $(this).attr('href');
149      let target = $(href == '#' || href == '' ? 'html' : href);
150      let position = target.offset().top + adjust;
151      $('body,html')
152        .stop(true)
153        .animate({scrollTop: position}, speed, 'easeInOutCubic', () => {});
154      $('body').removeClass('is-menu-open');
155      return false;

156    });
157  },
158  init() {
159    this.hash();
160  },
161};
162
163const Menu = {
164  setting() {
165    $('.js-menu-btn').on('click', function () {
166      if ($('body').hasClass('is-menu-open')) {
167        $('body').removeClass('is-menu-open');
168      } else {
169        $('body').addClass('is-menu-open');
170      }
171    });
172  },
173  init() {
174    this.setting();
175  },
176};
177
178const TicketSlider = {
179  sliderArr: [],
180  setting() {
181    let target = $('.goods_swiper');
182    let parent;
183    let prev;
184    let next;
185    let pagination;
186    target.each((idx, elm) => {
187      parent = $(elm).parent('.p-ticket__tabcontent-thumb');
188      prev = $(parent).find('.swiper-button-prev');
189      next = $(parent).find('.swiper-button-next');
190      pagination = $(parent).find('.swiper-pagination');
191      if ($(elm).find('.swiper-slide').length <= 1) {
192        $(parent).addClass('is-no-slide');
193      } else {
194        this.sliderArr.push(
195          new Swiper(elm, {
196            loop: true,
197            centeredSlides: true,
198            slidesPerView: '1',
199            speed: 800,
200            followFinger: false,
201            autoplay: {
202              delay: 5000,
203              disableOnInteraction: false,
204            },
205            pagination: {
206              el: pagination,
207              clickable: true,
208            },
209            effect: 'fade',
210            fadeEffect: {
211              crossFade: true,
212            },
213            navigation: {
214              nextEl: next,
215              prevEl: prev,
216            },
217          })
218        );
219      }
220    });
221  },
222  init() {
223    this.setting();
224  },
225};
226
227const TicketTab = {
228  setting() {

229    let currentData;
230    $('[data-ticket-tab]').on('click', function () {
231      currentData = $(this).data('ticket-tab');
232      $('[data-ticket-tab]').removeClass('is-current');
233      $(this).addClass('is-current');
234      $('[data-tab-content]').removeClass('is-current');
235      $('[data-tab-content="' + currentData + '"]').addClass('is-current');
236      ScrollModule.Update();
237      $(TicketSlider.sliderArr).each((idx, elm) => {
238        elm.destroy();
239      });
240      TicketSlider.init();
241    });
242  },
243  init() {
244    this.setting();
245  },
246};
247
248let win_W;
249$(window).on('load resize', function () {
250  win_W = $(window).width();
251});
252$(window).on('resize', function () {
253  if (ScrollModule) {
254    ScrollModule.Update();
255  }
256});
257$(window).on('load', function () {
258  AncorScroll.init();
259  Menu.init();
260  TicketTab.init();
261  $('body').addClass('is-load');
262  if ($('#PV_Player').length) {
263    MainMovie();
264  }
265  if ($('.movie_swiper').length) {
266    MovieSlide();
267  }
268
269  TicketSlider.init();
270
271  Modal();
272  Scroll();
273  $('[data-scroll-top]').on('click', function () {
274    $('body, html').animate({scrollTop: 0}, 1200, 'easeInOutCubic');
275  });
276});
277
278$(function () {
279  $('body').addClass('is-ready');
280});