https://mahouka.us/yotsuba/assets/js/yotsuba.base.js

1'use strict';
2const SCRIPT_UTILITY = {
3  $window: $(window),
4  $document: $(document),
5  $html: $('html'),
6  $body: $('body'),
7
8  vh: window.innerHeight,
9  svh: window.innerHeight,
10  lvh: window.outerHeight,
11  vw: window.innerWidth,
12  documentRoot: document.documentElement,
13  mq: {
14    hov: () => {
15      return matchMedia('(hover: hover) and (pointer: fine)').matches;
16    },
17    land: () => {
18      return matchMedia('(orientation: landscape)').matches;
19    },
20    pc: function () {
21      let breakpoint = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 961;
22      return matchMedia('(min-width:'.concat(breakpoint, 'px)')).matches;
23    },
24  },
25  zeroPadding(num) {
26    let length = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
27    return String(num).padStart(length, '0');
28  },
29  getParameterByName(name) {
30    let url = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : location.search;
31    const searchParams = new URLSearchParams(url);
32    return searchParams.get(name);
33  },
34  userAgent: {
35    setup() {
36      var _navigator;
37      const ua = (_navigator = navigator) === null || _navigator === void 0 || (_navigator = _navigator.userAgent) === null || _navigator === void 0 ? void 0 : _navigator.toLowerCase();
38      if (ua.indexOf('iphone') > 0 || (ua.indexOf('android') > 0 && ua.indexOf('mobile') > 0)) {
39        this.ua = 'sp';
40        if (ua.indexOf('iphone') > 0) {
41          this.os = 'iOS';
42        }
43        if (ua.indexOf('android') > 0) {
44          this.os = 'android';
45        }
46      } else if (ua.indexOf('ipad') > 0 || ua.indexOf('android') > 0) {
47        this.ua = 'sp';
48        if (ua.indexOf('ipad') > 0) {
49          this.os = 'iOS';
50        }
51        if (ua.indexOf('android') > 0) {
52          this.os = 'android';
53        }
54      } else {
55        this.ua = 'pc';
56        this.os = 'pc';
57      }
58      if (ua.indexOf('windows nt') !== -1) {
59        this.os = 'win';
60      } else if (this.ua === 'pc' && ua.indexOf('mac os x') !== -1) {
61        this.os = 'mac';
62      }
63
64      if (ua.indexOf('msie') !== -1 || ua.indexOf('trident') !== -1) {
65        this.browser = 'ie';
66      } else if (ua.indexOf('edge') !== -1) {
67        this.browser = 'html_edge';
68      } else if (ua.indexOf('edg') !== -1) {
69        this.browser = 'edge';
70      } else if (ua.indexOf('chrome') !== -1) {
71        this.browser = 'chrome';
72      } else if (ua.indexOf('safari') !== -1) {
73        this.browser = 'safari';
74      } else if (ua.indexOf('firefox') !== -1) {
75        this.browser = 'firefox';
76      } else {
77        this.browser = 'other';
78      }
79
80      SCRIPT_UTILITY.$html.attr('data-ua', this.ua);
81      SCRIPT_UTILITY.$html.attr('data-os', this.os);
82      SCRIPT_UTILITY.$html.attr('data-browser', this.browser);
83    },
84  },
85  setHeight() {
86    let forced = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
87    if (forced || SCRIPT_UTILITY.userAgent.ua === 'pc' || SCRIPT_UTILITY.vw !== window.innerWidth) {
88      SCRIPT_UTILITY.svh = window.innerHeight;
89    }
90    SCRIPT_UTILITY.vh = window.innerHeight;
91    SCRIPT_UTILITY.vw = window.innerWidth;
92    SCRIPT_UTILITY.lvh = window.outerHeight;
93    // SCRIPT_UTILITY.documentRoot.style.setProperty('--vw', `${SCRIPT_UTILITY.vw}px`);
94    SCRIPT_UTILITY.documentRoot.style.setProperty('--vh', ''.concat(SCRIPT_UTILITY.vh, 'px'));
95    SCRIPT_UTILITY.documentRoot.style.setProperty('--svh', ''.concat(SCRIPT_UTILITY.svh, 'px'));
96    // SCRIPT_UTILITY.documentRoot.style.setProperty('--lvh', `${SCRIPT_UTILITY.lvh}px`);
97  },
98  delay: function () {
99    let time = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 100;
100    return new Promise((resolve) => setTimeout(async () => resolve(), time));
101  },
102  init() {
103    this.userAgent.setup();
104    this.setHeight();
105    window.addEventListener('load', () => {
106      this.setHeight();
107    });
108    window.addEventListener('resize', () => {
109      this.setHeight();
110    });
111    window.addEventListener('orientationchange', () => {
112      this.setHeight(true);
113    });
114  },
115};

116SCRIPT_UTILITY.init();
117
118(() => {
119  const {$document, $window, $body, $html, vh, svh, lvh, vw, mq, documentRoot, zeroPadding, getParameterByName, userAgent, setHeight, delay} = SCRIPT_UTILITY;
120
121  const On = (SCRIPT_UTILITY.On = {
122    ready() {
123      $body.addClass('is-ready');
124    },
125    load() {
126      $body.addClass('is-load');
127    },
128  });
129
130  $(document).ready(() => {
131    ModalModule.init();
132    On.ready();
133  });
134
135  $(window)
136    .on('load', async () => {
137      setHeight();
138      Menu.init();
139      Scroll.init();
140
141      On.load();
142      Marquee.init();
143      ScrollAnimation.init();
144      sessionStorage.setItem('op', 'true');
145    })
146    .on('resize', () => {
147      setHeight();
148    })
149    .on('orientationchange', () => {
150      setHeight(true);
151    });
152  const Menu = (SCRIPT_UTILITY.Menu = {
153    config: {
154      wrap: '.js-wrap',
155      btn: '.js-menu',
156      area: 'js-menu-area',
157      open: '.js-menu-open',
158      close: '.js-menu-close',
159    },
160    param: {
161      timer: 400,
162      duration: 850,
163    },
164    state: {
165      isDone: true,
166      open: false,
167    },
168    timer: undefined,
169    toggle() {
170      if (!this.state.open) {
171        this.open();
172      } else {
173        this.close();
174      }
175    },
176    open() {
177      if (!this.state.open) {
178        clearTimeout(this.timer);
179        this.state.open = true;
180        $body.addClass('is-menu-show');
181        setTimeout(() => {
182          $body.addClass('is-menu-open');
183        }, 10);
184      }
185    },
186    close() {
187      this.state.open = false;
188      $body.removeClass('is-menu-open');
189      this.timer = setTimeout(() => {
190        $body.removeClass('is-menu-show');
191      }, this.param.duration);
192    },
193    click() {
194      $body.on('click', '.js-menu', (e) => {
195        this.toggle();
196      });
197      $body.on('click keydown', '.js-menu-open', (e) => {
198        this.open();
199      });
200      $body.on('click keydown', '.js-menu-close', (e) => {
201        this.close();
202      });
203    },
204    init() {
205      this.click();
206    },
207  });
208  const Scroll = (SCRIPT_UTILITY.Scroll = {
209    app: undefined,
210    isSmooth: false,
211    setup() {
212      if (mq.hov()) this.smooth();
213    },
214    smooth() {
215      const lenis = (this.app = new Lenis({
216        duration: 1,
217        easing: (x) => 1 - Math.pow(1 - x, 4), // https://www.desmos.com/calculator/brs54l4xou
218        orientation: 'vertical', // vertical, horizontal
219        gestureOrientation: 'vertical', // vertical, horizontal, both
220        smoothWheel: true,
221        wheelMultiplier: 1,
222        smoothTouch: true,
223        touchMultiplier: 2,
224        infinite: false,
225      }));
226      this.isSmooth = true;
227      $body.addClass('is-smooth');
228      lenis.on('scroll', ScrollTrigger.update);
229      gsap.ticker.add((time) => {
230        lenis.raf(time * 1000);
231      });
232      gsap.ticker.lagSmoothing(0);
233    },
234    anchor() {
235      let top = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
236      let left = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
237      let option = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
238      return new Promise((resolve) => {
239        $('html,body').animate(
240          {
241            scrollTop: top,
242          },
243          option !== null && option !== void 0 && option.immediate ? 0 : option !== null && option !== void 0 && option.duration ? option.duration : 800,
244          option !== null && option !== void 0 && option.easing ? option.easing : 'easeOutQuart',
245          resolve
246        );
247      });
248    },
249    update() {
250      var _this$app, _this$app$resize;
251      (_this$app = this.app) === null || _this$app === void 0 || (_this$app$resize = _this$app.resize) === null || _this$app$resize === void 0 || _this$app$resize.call(_this$app);
252    },
253    start() {
254      if (this.app) {
255        var _this$app2, _this$app2$start;
256        (_this$app2 = this.app) === null || _this$app2 === void 0 || (_this$app2$start = _this$app2.start) === null || _this$app2$start === void 0 || _this$app2$start.call(_this$app2);
257      }
258      $body.css({
259        height: 'auto',
260        overflowY: 'auto',
261      });
262    },
263    stop() {
264      if (this.app) {
265        var _this$app3, _this$app3$stop;
266        (_this$app3 = this.app) === null || _this$app3 === void 0 || (_this$app3$stop = _this$app3.stop) === null || _this$app3$stop === void 0 || _this$app3$stop.call(_this$app3);
267      }
268      $body.css({
269        height: svh,
270        overflowY: 'hidden',
271      });
272    },
273    destroy() {
274      var _this$app4, _this$app4$destroy;
275      $body.removeClass('is-smooth');
276      (_this$app4 = this.app) === null || _this$app4 === void 0 || (_this$app4$destroy = _this$app4.destroy()) === null || _this$app4$destroy === void 0 || _this$app4$destroy();
277    },
278    scrollTo(e) {
279      let event = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
280      const dataScroll = typeof e === 'string' ? e : e.attr('data-anchor');
281      const offsetData = typeof e === 'string' ? 0 : isNaN(parseFloat(e.attr('data-anchor-offset'))) ? e.attr('data-anchor-offset') : parseFloat(e.attr('data-anchor-offset'));
282      let offset = 0;
283      if (typeof offsetData === 'string') {
284        offset = $(offsetData).innerHeight();
285      } else if (typeof offsetData === 'number') {
286        offset = offsetData;
287      }
288      let destination = dataScroll;
289      if (dataScroll === 'top') {
290        destination = 'body';
291      }
292      this.anchor($(destination).offset().top, $(destination).offset().left).then(() => {});
293    },
294    event() {
295      $body.on('click keydown', '[data-anchor]', (_ref) => {
296        let {key, type, currentTarget} = _ref;
297        if (type === 'click' || key === 'Enter') this.scrollTo($(currentTarget), $(currentTarget).attr('data-anchor-space'));
298      });
299    },
300    loadScroll() {
301      const _anchor = getParameterByName('scroll');
302      if (_anchor) {
303        this.scrollTo('#'.concat(_anchor));
304      }
305    },
306    init() {
307      this.event();
308      this.setup();
309    },
310  });
311  const ScrollAnimation = {
312    setup() {
313      var _document$querySelect;
314      const mm = {
315        app: gsap.matchMedia(),

316        pc: '(min-width: 961px)',
317        sp: '(max-width: 960px)',
318        land: '(orientation: landscape)',
319        port: '(orientation: portrait)',
320      };
321      (_document$querySelect = document.querySelectorAll('[data-scrollpoint]')) === null ||
322        _document$querySelect === void 0 ||
323        _document$querySelect.forEach((el, index) => {
324          gsap.to(el, {
325            scrollTrigger: {
326              trigger: el,
327              start: 'top 80%',
328              toggleClass: {
329                targets: el,
330                className: 'is-scroll-active',
331              },
332              once: true,
333            },
334          });
335        });
336      mm.app.add(mm.pc, () => {
337        var _document$querySelect2;
338        (_document$querySelect2 = document.querySelectorAll('[data-parallax]')) === null ||
339          _document$querySelect2 === void 0 ||
340          _document$querySelect2.forEach((el, index) => {
341            const ratio = el.getAttribute('data-parallax') || 1;
342            gsap.fromTo(
343              el,
344              {
345                y: ''.concat(5 * ratio, 'rem'),
346              },
347              {
348                y: ''.concat(-5 * ratio, 'rem'),
349                ease: 'none',
350                scrollTrigger: {
351                  trigger: el,
352                  start: 'top',
353                  end: 'bottom',
354                  scrub: 0,
355                  toggleActions: 'restart none none reverse',
356                },
357              }
358            );
359          });
360      });
361      mm.app.add(mm.sp, () => {
362        var _document$querySelect3;
363        (_document$querySelect3 = document.querySelectorAll('[data-parallax]')) === null ||
364          _document$querySelect3 === void 0 ||
365          _document$querySelect3.forEach((el, index) => {
366            const ratio = el.getAttribute('data-parallax') || 1;
367            gsap.fromTo(
368              el,
369              {
370                y: ''.concat(2.5 * ratio, 'rem'),
371              },
372              {
373                y: ''.concat(-2.5 * ratio, 'rem'),
374                ease: 'none',
375                scrollTrigger: {
376                  trigger: el,
377                  start: 'top-='.concat(vh),
378                  end: 'bottom+='.concat(vh),
379                  scrub: 0,
380                  toggleActions: 'restart none none reverse',
381                },
382              }
383            );
384          });
385      });
386    },
387    init() {
388      this.setup();
389    },
390  };
391  const ModalModule = {
392    app: null,
393    setup() {
394      let html =
395        '' +
396        '<section class="m-modal is-close" id="{{ id }}" data-modal-type>' +
397        '  <div class="m-modal__container">' +
398        '  <div class="m-modal__bg" data-modal-ui-close></div>' +
399        '    <div class="m-modal__content">' +
400        '    {{ content }}' +
401        '    </div>' +
402        '  </div>' +
403        '<div class="m-modal__close" data-modal-ui-close>\n' +
404        '  <div class="m-modal__close-in">\n' +
405        '    <div class="m-modal__close-bar -bar1"></div>\n' +
406        '    <div class="m-modal__close-bar -bar2"></div>\n' +
407        '  </div>\n' +
408        '</div>' +
409        '</section>';
410      this.app = new MODAL_MODULE({
411        duration: 1200,
412        customModalHtml: html,
413        elemOutputSelector: '.js-wrap',
414        defaultModalStyle: false,
415        zIndex: 10,
416        elemYoutubePlayerAspectRatio: '16:9',
417        movie: {
418          youtube: {
419            playerVars: {
420              rel: 0,
421              loop: 1,
422              fs: 0,
423              autoplay: 0,
424              controls: 1,
425              showinfo: 0,
426              disablekb: 1,
427              playsinline: 1,
428              modestbranding: 1,
429              suggestedQuality: 'hd1080',
430              iv_load_policy: 3,
431              html5: 1,
432            },
433          },
434        },
435        on: {
436          init: () => {},
437          prepOpen: (data, target) => {
438            const templateType = $(target).attr('data-modal-category');
439            if (templateType) {
440              $('.m-modal').attr('data-modal-category', templateType);
441            }
442            setTimeout(() => {
443              $body.addClass('is-modal-show');
444            }, 1000);
445          },
446          afterClose: () => {
447            $body.removeClass('is-modal-show');
448            setTimeout(() => {
449              $('.m-modal').removeAttr('data-modal-category');
450            }, 1000);
451          },
452          prepClose: () => {},
453        },
454      });
455    },
456    update() {
457      this.app.Update();
458    },
459    click() {
460      $body.on('click', '[data-modal-open]', (event) => {
461        const $target = event.currentTarget;
462        this.app.Open($($target).attr('data-modal-open'), $target);
463      });
464    },
465    init() {
466      this.click();
467      this.setup();
468    },
469  };
470  const Marquee = {
471    setup() {
472      $('.js-marquee').each((index, el) => {
473        const $el = $(el);
474        const text = $el.html();
475        let _html = '';
476        for (let i = 0; i < 15; i++) {
477          _html += ''.concat(text, ' ');
478        }
479        $el.html(_html);
480        $el.attr('data-text', _html);
481        $el.css({
482          animationDuration: ''.concat(($el.innerWidth() / vw) * 60, 's'),
483        });
484      });
485    },
486    init() {
487      this.setup();
488    },
489  };
490})();