http://typemoon.com/products/mahoyo/assets/js/mahoyo.js

1import barba from './lib/barba.esm.js';
2
3function setSessionStorage(key, value) {
4  if (!window.sessionStorage) return;
5  try {
6    sessionStorage.setItem(key, value);
7  } catch (err) {
8    console.error(err);
9  }
10}
11
12var PAGE = document.querySelector('[data-area]').getAttribute('data-area');
13window.$_CURRENT_CONTENT = $('[data-barba="container"]');
14var CURRENT_AREA_ID = new Date().getTime().toString();
15var PREV_AREA_ID = undefined;
16
17var idChange = function idChange() {
18  PREV_AREA_ID = CURRENT_AREA_ID;
19  CURRENT_AREA_ID = new Date().getTime().toString();
20};
21
22var ChangePAGE = function ChangePAGE(area) {
23  PAGE = area;
24  $wrap.attr('data-area', PAGE);
25};
26
27var $html = $('html');
28var $body = $('body');
29var $wrap = $('.js-wrap');
30
31var winW = window.innerWidth;
32
33var Default = {
34  mq: function mq() {
35    var breakpoint = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 960;
36    return matchMedia('(min-width:'.concat(breakpoint, 'px)')).matches;
37  },
38  land: function land() {
39    return matchMedia('(orientation: landscape)').matches;
40  },
41  getParameterByName: function getParameterByName(name) {
42    var url = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : location.href;
43    name = name.replace(/[\[\]]/g, '\\$&');
44    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
45      results = regex.exec(url);
46    if (!results) return null;
47    if (!results[2]) return '';
48    return decodeURIComponent(results[2].replace(/\+/g, ' '));
49  },
50  userAgent: function userAgent() {
51    var ua = navigator.userAgent;
52    if (ua.indexOf('iPhone') > 0 || (ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0)) {
53      this.ua = 'sp';
54      if (ua.indexOf('iPhone') > 0) this.os = 'iOS';
55      if (ua.indexOf('Android') > 0) this.os = 'android';
56    } else if (ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0) {
57      this.ua = 'tablet';
58      if (ua.indexOf('iPad') > 0) this.os = 'iOS';
59      if (ua.indexOf('Android') > 0) this.os = 'android';
60    } else {
61      this.ua = 'pc';
62      this.os = 'pc';
63    }
64    if (ua.toLowerCase().indexOf('windows nt') !== -1) {
65      this.os = 'win';
66    } else if (this.ua === 'pc' && ua.toLowerCase().indexOf('mac os x') !== -1) {
67      this.os = 'mac';
68    }
69
70    if (ua.toLowerCase().indexOf('msie') !== -1 || ua.toLowerCase().indexOf('trident') !== -1) {
71      this.browser = 'ie';
72    } else if (ua.toLowerCase().indexOf('edge') !== -1) {
73      this.browser = 'html_edge';
74    } else if (ua.toLowerCase().indexOf('edg') !== -1) {
75      this.browser = 'edge';
76    } else if (ua.toLowerCase().indexOf('chrome') !== -1) {
77      this.browser = 'chrome';
78    } else if (ua.toLowerCase().indexOf('safari') !== -1) {
79      this.browser = 'safari';
80    } else if (ua.toLowerCase().indexOf('firefox') !== -1) {
81      this.browser = 'firefox';
82    } else {
83      this.browser = 'other';
84    }
85    this.setUa();
86  },
87  zeroPadding: function zeroPadding(num) {
88    var length = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
89    return ('0000000000' + num).slice(-length);
90  },
91  setUa: function setUa() {
92    $html.attr('data-ua', this.ua || '');
93    $html.attr('data-os', this.os || '');
94    $html.attr('data-browser', this.browser || '');
95  },
96  init: function init() {
97    this.userAgent();
98  },
99};
100
101Default.init();
102
103$(document).ready(function () {
104  On.ready();
105});
106$(window)
107  .on('load', function () {
108    _FIRST.init();
109    _MUSIC.init();
110    Pjax.init();
111    On.load();
112
113    document.querySelector('[data-barba="container"]').classList.add('is-enter');
114    if (typeof PAGE_FUNCTION[PAGE] !== 'undefined') {
115      PAGE_FUNCTION[PAGE].enter($_CURRENT_CONTENT);
116    }
117  })
118  .on('resize', function () {
119    if (winW !== window.innerWidth) {
120    }
121  });
122
123var PAGE_FUNCTION = {
124  top: {
125    enter: function enter() {
126      _NEWS.init();
127    },
128    leave: function leave() {},
129  },
130
131  character: {
132    enter: function enter() {
133      Chara();
134    },
135    leave: function leave() {},
136  },
137
138  gallery: {
139    enter: function enter() {
140      Gallery.init();
141    },
142    leave: function leave() {},
143  },
144
145  keyword: {
146    enter: function enter() {
147      Keyword();
148    },
149    leave: function leave() {},
150  },
151
152  special: {
153    enter: function enter() {
154      Special();
155    },
156    leave: function leave() {},
157  },
158};
159
160// common
161
162var Enter = function Enter(data, $content) {
163  if (typeof PAGE_FUNCTION[data] !== 'undefined') {
164    PAGE_FUNCTION[data].enter($content);
165  }
166};
167var Leave = function Leave(data, $content) {
168  if (typeof PAGE_FUNCTION[data] !== 'undefined') {
169    PAGE_FUNCTION[data].leave($content);
170  }
171};
172var On = {
173  ready: function ready() {
174    $body.addClass('is-ready');
175  },
176  load: function load() {
177    $body.addClass('is-load');
178  },
179};
180
181var Pjax = {
182  set: function set() {
183    barba.init({
184      timeout: 15000,
185      preventRunning: true,
186      prevent: function prevent(_ref) {
187        var href = _ref.href,
188          el = _ref.el;
189        return href === location.pathname || !el.classList.contains('link-pjax') || el.classList.contains('no-pjax') || el.classList.contains('no-barba');
190      },
191      requestError: function requestError(trigger, action, url, response) {
192        if (action === 'click') {
193          location.href = url;
194        }
195        return false;
196      },
197      transitions: [
198        {
199          name: 'transition',
200          sync: true,
201          enter: function enter(data) {
202            ChangePAGE(data.next.namespace);
203          },
204          leave: function leave(data) {
205            ChangePAGE(data.next.namespace);
206            return new Promise(function (resolve) {
207              setTimeout(function () {
208                resolve();
209              }, 500);
210            });
211          },
212        },
213      ],
214    });

215
216    barba.hooks.before(function (event) {});
217    barba.hooks.beforeLeave(function (data) {
218      data.current.container.classList.add('is-leave');
219      $body.addClass('is-pjax');
220      $body.addClass('is-pjax-anim');
221    });
222    barba.hooks.leave(function (data) {});
223    barba.hooks.afterLeave(function (data) {
224      Leave(data.current.namespace, $(data.current.container));
225      if (!data.next.container) {
226        location.href = data.next.url.href;
227      }
228    });
229    barba.hooks.beforeEnter(function (data) {
230      $('#navigation').removeClass('is_open');
231    });
232    barba.hooks.enter(function (data) {
233      data.next.container.style.position = 'fixed';
234      idChange();
235      setTimeout(function () {
236        Enter(data.next.namespace, $(data.next.container));
237        data.next.container.classList.add('is-enter');
238      }, 100);
239    });
240    barba.hooks.afterEnter(function (data) {
241      data.next.container.style.position = 'relative';
242      if ($body.hasClass('is-pjax')) {
243        $('html,body').animate(
244          {
245            scrollTop: 0,
246          },
247          0
248        );
249        $body.removeClass('is-pjax');
250      }
251      setTimeout(function () {
252        $body.removeClass('is-pjax-anim');
253      }, 500);
254    });
255    barba.hooks.after(function () {
256      gtag('js', new Date());
257    });
258  },
259  init: function init() {
260    if (Default.browser !== 'ie') {
261      this.set();
262    }
263  },
264};
265
266$body.on('click', '.btn_nav', function () {
267  var cl = $('#navigation').attr('class');
268  if (cl.indexOf('open') > 0) {
269    $('#navigation').removeClass('is_open');
270  } else {
271    $('#navigation').addClass('is_open');
272  }
273});
274
275$body.on('click', '.nav_contents_bg', function () {
276  $('#navigation').removeClass('is_open');
277});
278
279var _MUSIC = {
280  item: '/products/mahoyo/assets/music/bgm.mp3',
281  bg: '',
282  playable: false,
283  init: function init() {
284    var _this2 = this;
285    this.bg = new Audio(this.item);
286    this.bg.loop = true;
287    $('.music_wrap')
288      .find('.-on')
289      .on('click', function () {
290        _this2.playable = true;
291        _this2.bg.play();
292      });
293    $('.music_wrap')
294      .find('.-off')
295      .on('click', function () {
296        _this2.playable = false;
297        _this2.bg.pause();
298      });
299  },
300  pause: function pause() {
301    if (this.playable) {
302      this.bg.pause();
303    }
304  },
305  start: function start() {
306    if (this.playable) {
307      this.bg.play();
308    }
309  },
310  play: function play() {
311    if (this.playable) {
312      this.bg.play();
313    } else {
314      this.playable = true;
315      this.bg.play();
316    }
317  },
318};
319
320var _FIRST = {
321  img_h: 0,
322  win_h: 0,
323
324  set_Size: function set_Size() {
325    var _this = this;
326
327    _this.img_h = $('.main_area').height();
328    _this.win_h = $(window).height();
329  },
330
331  init: function init() {
332    var _this = this;
333
334    this.set_Size();
335    if (_this.img_h > _this.win_h) {
336      $('.main_area')
337        .find('.image')
338        .css({transform: 'translateY(' + (_this.img_h - _this.win_h) * -1 + 'px)'});
339    }
340
341    $('body').addClass('is-modal-open');
342
343    $('#loading').addClass('is_load');
344
345    $('.music_btn')
346      .find('li')
347      .click(function () {
348        var play = $(this).data('sound');
349        if (play == 'on') {
350          _MUSIC.play();
351        }
352        $('#loading').removeClass('is_load').addClass('is_start');
353        $('#wrapper').addClass('is_open');
354
355        setTimeout(function () {
356          $('.main_area .image').addClass('_move');
357        }, 3000);
358
359        setTimeout(function () {
360          $('body').removeClass('is-modal-open');
361        }, 4000);
362      });
363  },
364};
365
366var _NEWS = {
367  url: 'https://www.aniplex.co.jp/mahoyo_gm/news.xml',
368  xml: '',
369  get_List: function get_List() {
370    var _this = this;
371    var title,
372      date,
373      url = '';
374    var html = [];
375    var data = {};
376    _this.xml.find('item').each(function (i) {
377      data = $(this);
378      title = $(this).find('title').text();
379      var dateObj = new Date($(this).find('pubDate').text());

380      date = dateObj.getFullYear() + '.' + (dateObj.getMonth() + 1) + '.' + dateObj.getDate();
381
382      var postContent = $(this).find('content\\:encoded').text();
383
384      html.push('<li class="news_list__item" data-modal="template" data-id="' + i + '">' + '<p class="news_date">' + date + '</p>' + '<p class="news_text">' + title + '</p>' + '</li>');
385    });
386    $('.news_list').html(html.join(''));
387    Modal.init();
388  },
389  init: function init() {
390    var _this = this;
391
392    $.ajax({
393      url: _this.url,
394    }).done(function (xml) {
395      _this.xml = $(xml);
396      _this.get_List();
397    });
398  },
399};
400
401var Modal = {
402  instance: null,
403  init: function init() {
404    var _this = this;
405    var _template =
406      '' +
407      '<div class="m-modal is-close" id="{{ id }}" data-modal-type>' +
408      '  <div class="m-modal__wrap">' +
409      '    <div class="m-modal__bg" data-modal-ui-close><div class="m_modal__charabg"></div></div>' +
410      '    <div class="m-modal__inner">' +
411      '      <div class="m-modal__content">' +
412      '        {{ content }}' +
413      '      </div>' +
414      '    </div>' +
415      '    <div class="m-modal__close" data-modal-ui-close data-pointer>' +
416      '    </div>' +
417      '  </div>' +
418      '</div>';
419
420    this.instance = new MODAL_MODULE({
421      duration: 400,
422      zIndex: 600,
423      removeWrapperTag: false,
424      defaultModalStyle: false,
425      customModalHtml: _template,
426      customModalStyle: '<style>.m-modal {} </style>',
427      loadStart: false,
428      elemOutputSelector: '.l-modal',
429      elemYoutubePlayerAspectRatio: '16:9',
430      movie: {
431        youtube: {
432          height: '360',
433          width: '640',
434          playerVars: {
435            autoplay: 1,
436            playsinline: 1,
437            controls: 1,
438            disablekb: 0,
439            fs: 1,
440            loop: 0,
441            rel: 0,
442          },
443        },
444      },
445
446      on: {
447        beforeOpen: function beforeOpen(data, target, state, elem) {},
448        afterOpen: function afterOpen(data, target, state, elem) {
449          var id = $(target).data('id');
450          var item = '';
451          _NEWS.xml.find('item').each(function (i) {
452            if (i == id) {
453              data = $(this);
454              var title = $(this).find('title').text();
455              var dateObj = new Date($(this).find('pubDate').text());
456              var date = dateObj.getFullYear() + '.' + (dateObj.getMonth() + 1) + '.' + dateObj.getDate();
457              var postContent = $(this).find('content\\:encoded').text();
458
459              var html = '<div class="modal_news">' + '<div class="news_title">' + '<p class="-date">' + date + '</p>' + '<p class="-title">' + title + '</p>' + '</div>' + '<div class="news_text">' + postContent + '</div>' + '</div>';
460
461              $('.m-modal__content').html(html);
462            }
463          });
464        },
465        afterClose: function afterClose(data, target, state, elem) {
466          $('.m-modal__content').empty();
467        },
468      },
469    });
470  },
471};
472
473function Chara() {
474  var _flag = true;
475  $('.chara_nav')
476    .find('li')
477    .on('click', function () {
478      var _t = $(this).data('target');
479      if (_flag) {
480        _flag = false;
481
482        $('.chara_image__inner.is_current').addClass('is_remove');
483        $('.chara_image__inner[data-chara=' + _t + ']').addClass('is_add');
484
485        $('.chara_info__inner.is_current').addClass('is_remove');
486        $('.chara_info__inner[data-chara=' + _t + ']').addClass('is_add');
487
488        setTimeout(function () {
489          $('.chara_image__inner.is_current').removeClass('is_current').removeClass('is_remove');
490          $('.chara_image__inner.is_add').addClass('is_current').removeClass('is_add');
491
492          $('.chara_info__inner.is_current').removeClass('is_current').removeClass('is_remove');
493          $('.chara_info__inner.is_add').addClass('is_current').removeClass('is_add');
494
495          _flag = true;
496        }, 1400);
497      }
498    });
499}
500var Gallery = {
501  _flag: true,
502  _image: '',
503  _id: 0,
504  change_image: function change_image() {
505    var _this = this;
506
507    if (_this._flag) {
508      _this._flag = false;
509
510      $('.main_visual').find('.next').html(_this._image).addClass('is_open');
511
512      setTimeout(function () {
513        $('.main_visual .now').html(_this._image);
514        $('.main_visual .next').removeClass('is_open');
515
516        _this._flag = true;
517      }, 650);
518    }
519  },

520  init: function init() {
521    var _this = this;
522    $('.gallery_list')
523      .find('li')
524      .click(function () {
525        _this._image = $(this).find('p').html();
526        _this._id = $(this).data('target');
527        _this.change_image();
528      });
529
530    $('.nav_prev').click(function () {
531      _this._id--;
532      if (_this._id < 0) {
533        _this._id = 5;
534      }
535
536      _this._image = $('.gallery_list__item[data-target=' + _this._id + ']')
537        .find('p')
538        .html();
539      _this.change_image();
540    });
541
542    $('.nav_next').click(function () {
543      _this._id++;
544      if (_this._id > 5) {
545        _this._id = 0;
546      }
547
548      _this._image = $('.gallery_list__item[data-target=' + _this._id + ']')
549        .find('p')
550        .html();
551      _this.change_image();
552    });
553  },
554};
555
556function Special() {
557  if ($('[data-modal]').length) {
558    var modalModule = new MODAL_MODULE({
559      duration: 500,
560      on: {
561        beforeOpen: function beforeOpen(data, target, state, elem) {
562          _MUSIC.pause();
563        },
564        afterClose: function afterClose(data, target, state, elem) {
565          _MUSIC.start();
566        },
567      },
568    });
569  }
570}
571
572function Keyword() {
573  if ($('[data-modal]').length) {
574    var modalModule = new MODAL_MODULE({
575      duration: 500,
576      on: {
577        beforeOpen: function beforeOpen(data, target, state, elem) {
578          _MUSIC.pause();
579        },
580        afterClose: function afterClose(data, target, state, elem) {
581          _MUSIC.start();
582        },
583      },
584    });
585  }
586}