https://www.monogatari-series.com/assets_portal/js/monogatari.common.js

1'use strict';
2
3var Mono = {
4  elements: {
5    wrap: '.js-wrap',
6    header: '.js-header',
7    footer: '.js-footer'
8  },
9  state: {
10    ua: null,
11    os: null
12  },
13  win: {
14    top: function top() {
15      return $(window).scrollTop();
16    },
17    bottom: function bottom() {
18      return $(window).scrollTop() + $(window).innerHeight();
19    }
20  },
21  exist: function exist(elem) {
22    var n = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
23    // 要素がn個存在するか
24    return $(elem).length > n;
25  },
26  breakpoint: function breakpoint() {
27    var breakpoint = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 767;
28
29    return $(window).innerWidth() > breakpoint;
30  },
31  userAgent: function userAgent() {
32    var ua = navigator.userAgent;
33    if (ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0) {
34      this.state.ua = 'sp';
35      if (ua.indexOf('iPhone') > 0) this.state.os = 'iphone';
36      if (ua.indexOf('Android') > 0) this.state.os = 'android';
37    } else if (ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0) {
38      this.state.ua = 'tablet';
39
40      if (ua.indexOf('iPad') > 0) this.state.os = 'ipad';
41      if (ua.indexOf('Android') > 0) this.state.os = 'android';
42    } else {
43      this.state.ua = 'pc';
44    }
45    this.setUa();
46  },
47  setUa: function setUa() {
48    $(this.elements.wrap).removeClass('is-ua-sp');
49    $(this.elements.wrap).removeClass('is-ua-tablet');
50    $(this.elements.wrap).removeClass('is-ua-pc');
51    $(this.elements.wrap).addClass('is-ua-' + this.state.ua);
52  },
53  resize: function resize() {
54    var _this = this;
55
56    $(window).on('resize', function () {
57      _this.userAgent();
58    });
59  }
60};
61Mono.userAgent();
62Mono.resize();
63window.Mono = Mono;
64
65var ShareText = new ShareTextEmbedded({
66  url: _share.url,
67  text: _share.text,
68  hash: _share.hash,
69  twitter: {
70    related: 'nisioisin_anime'
71  }
72});
73
74$(document).ready(function () {
75  On.ready();
76  Scroll.init();
77  ffs.init();
78  Menu.init();
79  Header.init();
80
81  NavSlide.init();
82  NavInSlide.init();
83  InNav.init();
84  BnrSlide.init();
85});
86
87$(window).on('load', function () {
88  On.load();
89});
90
91var ffs = {
92  ua: function ua() {
93    return navigator.userAgent.toLowerCase();
94  },
95  set: function set() {
96    if (this.ua().indexOf('windows nt 6.1') !== 0) {
97      $('body').addClass('ffs');
98    }
99  },
100  init: function init() {
101    this.set();
102  }
103};
104var On = {
105  ready: function ready() {
106    $(Mono.elements.wrap).addClass('is-ready');
107  },
108  load: function load() {
109    $(Mono.elements.wrap).addClass('is-load');
110  }
111};
112
113var Menu = {
114  config: {
115    addClass: 'is-menu-open',
116    btn: '.js-menu',
117    area: '.js-menu__area',
118    open: '.js-menu__open',
119    close: '.js-menu__close',
120    cover: '.js-menu__cover',
121    menu: {
122      addClass: 'is-menu_area__open',
123      delay: 'is-menu_area__opened'
124    },
125    timer: 650
126  },
127  state: {
128    enable: true,
129    isDone: true,
130    open: false
131  },
132  timer: null,
133  toggle: function toggle() {
134    if (this.state.open) {
135      this.close();
136    } else {
137      this.open();
138    }
139  },
140  open: function open() {
141    var _this2 = this;
142
143    $(Mono.elements.wrap).addClass(this.config.addClass);
144    $(Mono.elements.wrap).addClass(this.config.menu.addClass);
145    this.state.open = true;
146    if (!Mono.breakpoint(894)) {
147      InNav.show();
148    }
149    setTimeout(function () {
150      $(Mono.elements.wrap).addClass(_this2.config.menu.delay);
151    }, 50);
152  },
153  close: function close() {
154    var _this3 = this;
155
156    $(Mono.elements.wrap).removeClass(this.config.addClass);
157    $(Mono.elements.wrap).removeClass(this.config.menu.delay);
158    this.state.open = false;
159    if (!Mono.breakpoint(894)) {
160      InNav.hide();
161    }
162    setTimeout(function () {
163      $(Mono.elements.wrap).removeClass(_this3.config.menu.addClass);
164    }, 650);
165  },
166  throttle: function throttle() {
167    var _this4 = this;
168
169    this.state.enable = false;
170    this.timer = setTimeout(function () {
171      _this4.state.enable = true;
172    }, this.config.timer);
173  },
174  click: function click() {
175    var _this5 = this;
176
177    $(this.config.btn).on('click', function () {
178      if (_this5.state.enable) {
179        _this5.throttle();
180        _this5.toggle();
181      }
182    });
183    $(this.config.open).on('click', function () {
184      if (_this5.state.enable) {
185        _this5.throttle();
186        _this5.open();
187      }
188    });
189    $(this.config.close).on('click', function () {
190      if (_this5.state.enable) {
191        _this5.throttle();
192        _this5.close();
193      }
194    });
195  },

196  init: function init() {
197    this.click();
198  }
199};
200
201var Scroll = {
202  config: {
203    elem: '[data-scroll]'
204  },
205  parameter: {
206    speed: 800,
207    easing: 'easeOutQuart'
208  },
209  headerHeight: function headerHeight() {
210    return Mono.exist(Mono.elements.header) ? $(Mono.elements.header).innerHeight() : 0;
211  },
212
213  data: function data(e) {
214    var dataScroll = e.attr('data-scroll');
215    var destination = '#' + dataScroll;
216    if (dataScroll === 'top') {
217      destination = 'body';
218    }
219    var scrollHeight = $(destination).offset().top;
220    this.scroll(scrollHeight);
221  },
222  hash: function hash(e) {
223    var href = $(e).attr('href');
224    var target = $(href == '#' || href == '' ? 'html' : href);
225    var position = target.offset().top;
226    this.scroll(position);
227  },
228  scroll: function scroll(position) {
229    $('html,body').animate({
230      scrollTop: Mono.breakpoint() ? position : position - this.headerHeight()
231    }, this.parameter.speed, this.parameter.easing);
232  },
233  click: function click() {
234    var _this6 = this;
235
236    $(this.config.elem).on('click', function (e) {
237      _this6.data($(e.currentTarget));
238    });
239    /*
240          $('a[href^="#"]').on('click', (e) => {
241            this.hash(e.currentTarget);
242          });
243    */
244  },
245  init: function init() {
246    this.click();
247  }
248};
249var Header = {
250  state: {
251    position: 0
252  },

253  top: function top() {
254    $(Mono.elements.header).removeClass('is-nav-hide');
255  },
256  passed: function passed() {
257    $(Mono.elements.header).addClass('is-nav-hide');
258  },
259  up: function up() {
260    $(Mono.elements.header).removeClass('is-nav-hide');
261  },
262  down: function down() {
263    $(Mono.elements.header).addClass('is-nav-hide');
264  },
265  scroll: function scroll() {
266    var _this7 = this;
267
268    $(window).on('scroll', function (e) {
269      if ($(e.currentTarget).scrollTop() > $(Mono.elements.header).innerHeight()) {
270        _this7.passed();
271        if (!Mono.breakpoint(1024) && $(e.currentTarget).scrollTop() < _this7.state.position) {
272          _this7.up();
273        }
274        if (!Mono.breakpoint(1024) && $(e.currentTarget).scrollTop() > _this7.state.position) {
275          _this7.down();
276        }
277      } else {
278        _this7.top();
279      }
280      _this7.state.position = $(e.currentTarget).scrollTop();
281    });
282  },
283  init: function init() {
284    this.scroll();
285  }
286};
287
288var NavSlide = {
289  slide: undefined,
290  config: {
291    elem: '.js-gnav_slide',
292    wrap: '.js-gnav_slide__wrap',
293    item: '.js-gnav_slide__item',
294    img: '.js-gnav_slide__img',
295    nav: {
296      prev: '.js-gnav_slide__nav--prev',
297      next: '.js-gnav_slide__nav--next'
298    }
299  },
300  state: {
301    init: false
302  },
303  props: {
304    init: false,
305    speed: 650,
306    direction: 'horizontal',
307    slidesPerView: 'auto',
308    freeMode: true,
309    breakpointsInverse: true,
310    freeModeMomentum: false,
311    freeModeSticky: true,
312    setWrapperSize: true,
313    threshold: 0,
314    slideActiveClass: 'is-current',
315    slideNextClass: 'is-next',
316    slidePrevClass: 'is-prev',
317    mousewheel: {
318      invert: true
319    },
320    on: {
321      init: function init() {
322        this.slideTo(this.slides.length - 1, 0);
323        this.update();
324      },
325      slideChange: function slideChange() {}
326    }
327  },
328  set: function set() {
329    if (!Mono.breakpoint(1024)) {
330      this.define();
331    }
332  },
333  define: function define() {
334    this.slide = new Swiper(this.config.elem, this.props);
335    this.slide.init();
336    this.state.init = true;
337  },
338  resize: function resize() {
339    var _this8 = this;
340
341    $(window).on('resize', function () {
342      for (var i = 0; i < _this8.config.item.length; i++) {
343        if (_this8.state.init) {
344          _this8.slide.destroy();
345        }
346        _this8.set();
347      }
348    });
349  },
350  init: function init() {
351    if (Mono.exist(this.config.elem)) {
352      this.set();
353      this.resize();
354    }
355  }
356};
357
358var NavInSlide = {
359  slide: undefined,
360  config: {
361    elem: '.js-gnav_in_slide',
362    wrap: '.js-gnav_in_slide__wrap',
363    item: '.js-gnav_in_slide__item',
364    img: '.js-gnav_in_slide__img',
365    nav: {
366      prev: '.js-gnav_in_slide__nav--prev',
367      next: '.js-gnav_in_slide__nav--next'
368    }
369  },
370  state: {
371    init: false
372  },
373  props: {
374    init: false,
375    speed: 650,
376    direction: 'horizontal',
377    slidesPerView: 'auto',
378    freeMode: true,
379    breakpointsInverse: true,
380    freeModeMomentum: false,
381    freeModeSticky: true,
382    setWrapperSize: true,
383    threshold: 0,
384    slideActiveClass: 'is-current',
385    slideNextClass: 'is-next',
386    slidePrevClass: 'is-prev',
387    mousewheel: {
388      invert: true
389    },
390    on: {
391      init: function init() {
392        this.update();
393      },
394      slideChange: function slideChange() {}
395    }
396  },
397  set: function set() {
398    if (!Mono.breakpoint(1024)) {
399      this.define();
400    }
401  },
402  define: function define() {
403    this.slide = new Swiper(this.config.elem, this.props);
404    this.slide.init();
405    this.state.init = true;
406  },
407  resize: function resize() {
408    var _this9 = this;
409
410    $(window).on('resize', function () {
411      for (var i = 0; i < _this9.config.item.length; i++) {
412        if (_this9.state.init) {
413          _this9.slide.destroy();
414        }
415        _this9.set();
416      }
417    });
418  },
419  init: function init() {
420    if (Mono.exist(this.config.elem)) {
421      this.set();
422      this.resize();
423    }
424  }
425};
426
427var InNav = {
428  config: {
429    elem: '.js-in_nav',
430    hover: '.js-in_nav__hov'
431  },
432  timer: {
433    remove: null
434  },
435  state: {
436    show: false
437  },
438  show: function show() {
439    $(this.config.elem).addClass('is-in_nav-show');
440    this.state.show = true;
441  },
442  hide: function hide() {
443    $(this.config.elem).removeClass('is-in_nav-show');
444    this.state.show = false;

445  },
446  toggle: function toggle() {
447    $(this.config.elem).toggleClass('is-in_nav-show');
448    this.state.show = !this.state.show;
449  },
450  hover: function hover() {
451    var _this10 = this;
452
453    $(this.config.hover + ',' + this.config.elem).on('mouseenter', function () {
454      if (Mono.state.ua === 'pc') {
455        _this10.show();
456      }
457    });
458    $(this.config.hover + ',' + this.config.elem).on('mouseleave', function () {
459      if (Mono.state.ua === 'pc') {
460        _this10.hide();
461      }
462    });
463  },
464  click: function click() {
465    var _this11 = this;
466
467    $(this.config.hover + ',' + this.config.elem).on('click', function () {
468      if (Mono.state.ua !== 'pc') {
469        _this11.toggle();
470      }
471    });
472  },
473  init: function init() {
474    this.click();
475    this.hover();
476  }
477};
478
479var BnrSlide = {
480  slide: undefined,
481  config: {
482    elem: '.js-bnr_slide',
483    wrap: '.js-bnr_slide__wrap',
484    item: '.js-bnr_slide__item',
485    img: '.js-bnr_slide__img',
486    nav: {
487      prev: '.js-bnr_slide__nav--prev',
488      next: '.js-bnr_slide__nav--next'
489    }
490  },
491  state: {
492    init: false
493  },
494  props: {
495    init: false,
496    speed: 650,
497    direction: 'horizontal',
498    slidesPerView: 2.5,
499    spaceBetween: 15,
500    breakpointsInverse: true,
501    threshold: 0,
502    loopAdditionalSlides: 3,
503    slideActiveClass: 'is-current',
504    slideNextClass: 'is-next',
505    slidePrevClass: 'is-prev',
506    breakpoints: {
507      480: {
508        slidesPerView: 3,
509        spaceBetween: 15
510      },
511      768: {
512        slidesPerView: 4,
513        spaceBetween: 15
514      },
515      1024: {
516        slidesPerView: 4,
517        spaceBetween: 30
518      }
519    },
520    navigation: {
521      prevEl: '.js-bnr_slide__nav--prev',
522      nextEl: '.js-bnr_slide__nav--next',
523      disabledClass: 'is-nav-disable'
524    },
525    on: {
526      init: function init() {
527        this.update();
528      },
529      slideChange: function slideChange() {
530        $(BnrSlide.config.wrap).addClass('is-changing');
531        setTimeout(function () {
532          $(BnrSlide.config.wrap).removeClass('is-changing');
533        }, BnrSlide.props.speed);
534      }
535    }
536  },
537  set: function set() {
538    this.define();
539  },
540  define: function define() {
541    this.slide = new Swiper(this.config.elem, this.props);
542    this.slide.init();
543    this.state.init = true;
544  },
545  resize: function resize() {
546    var _this12 = this;
547
548    $(window).on('resize', function () {
549      for (var i = 0; i < _this12.slide.length; i++) {
550        _this12.slide.destroy();
551        _this12.set();
552      }
553    });
554  },
555  click: function click() {
556    var _this13 = this;
557
558    for (var p in this.config.nav) {
559      $(this.config.nav[p]).on('click', function (e) {
560        $(e.currentTarget).addClass('is-slide-change');
561        setTimeout(function () {
562          $(e.currentTarget).removeClass('is-slide-change');
563        }, _this13.props.speed - 1);
564      });
565    }
566  },
567  init: function init() {
568    if (Mono.exist(this.config.elem)) {
569      this.set();
570      this.resize();
571      this.click();
572    }
573  }
574};