https://a1p.jp/assets/js/a1p.top.js?v=1.7.0

1'use strict';
2(function () {
3  $(document).ready(function () {
4    HeroSlide.init();
5    // TopSlide.init();
6    // Modal.init();
7    // Movie.init();
8  });
9
10  var HeroSlide = {
11    slide: undefined,
12    config: {
13      elem: '.js-hero-slide',
14      item: '.js-hero-slide__item',
15      titleList: '.js-hero-slide__title-list',
16      title: '.js-hero-slide__title',
17      pagination: '.js-hero-slide__pagination',
18      nav: {
19        prev: '.js-hero-slide__nav--prev',
20        next: '.js-hero-slide__nav--next',
21      },
22    },
23    state: {
24      init: false,
25      slides: 0,
26    },
27    props: {
28      init: false,
29      speed: 500,
30      direction: 'horizontal',
31      slidesPerView: 1,
32      spaceBetween: 20,
33      breakpointsInverse: true,
34      // threshold: 9999,
35      // effect: 'fade',
36      loop: true,
37      followFinger: false,
38      loopAdditionalSlides: 2,
39      slideActiveClass: 'is-current',
40      slideNextClass: 'is-next',
41      slidePrevClass: 'is-prev',
42      autoplay: {
43        delay: 5000,
44        disableOnInteraction: false,
45      },
46      breakpoints: {
47        768: {
48          slidesPerView: 3,
49          spaceBetween: 17,
50        },
51      },
52      pagination: {
53        el: '.js-hero-slide__pagination',
54        type: 'bullets',
55        clickable: false,
56        renderBullet: function renderBullet() {
57          return '<li class="p-hero-slide__pagination-item">\n            <span class="p-hero-slide__pagination-bar"></span>\n          </li>';
58        },
59      },
60
61      on: {
62        init: function init() {
63          this.update();
64          HeroSlide.slide.autoplay.stop();
65          setTimeout(function () {
66            HeroSlide.paginationChange(0);
67            setTimeout(function () {
68              HeroSlide.slide.autoplay.start();
69            }, 500);
70          }, 100);
71        },
72        slideChange: function slideChange() {
73          // HeroSlide.change(this.realIndex);
74          // HeroSlide.updateGif(this.activeIndex);
75          HeroSlide.paginationChange(this.realIndex);
76        },
77      },
78    },
79    change: function change(currentIndex) {
80      // スライドが変わったときに発火
81      // this.addClassTitleList(currentIndex);
82      // this.setTitleHeight(currentIndex);
83    },
84    updateGif: function updateGif(activeIndex) {
85      // スライド変更時にGifを始めから再生
86      var _elem = $(this.slide)[0].slides.eq(activeIndex).find('img');
87      var _src1 = $(_elem[0])
88        .attr('src')
89        .match(/(.*\.gif).*$/)[0];
90      var _src2 = $(_elem[1])
91        .attr('src')
92        .match(/(.*\.gif).*$/)[0];
93      $(_elem[0]).attr('src', _src1 + '?' + Date.now());
94      $(_elem[1]).attr('src', _src2 + '?' + Date.now());
95    },
96    addClassTitleList: function addClassTitleList(i) {
97      // activeなtitleにaddclass
98
99      // active
100      $(this.config.titleList).children().find(this.config.title).removeClass('is-active');
101      $(this.config.titleList).children().eq(i).find(this.config.title).addClass('is-active');
102
103      // prev
104
105      $(this.config.titleList).children().find(this.config.title).removeClass('is-next');
106      $(this.config.titleList)
107        .children()
108        .eq(i === this.state.slides - 1 ? 0 : i + 1)
109        .find(this.config.title)
110        .addClass('is-next');
111
112      // next
113
114      $(this.config.titleList).children().find(this.config.title).removeClass('is-prev');
115      $(this.config.titleList)
116        .children()
117        .eq(i === 0 ? this.state.slides - 1 : i - 1)
118        .find(this.config.title)
119        .addClass('is-prev');
120    },
121    setTitleHeight: function setTitleHeight(i) {
122      // activeなtitleの高さを設定
123      $(this.config.titleList).css({
124        height: $(this.config.titleList).children().eq(i).innerHeight(),
125      });
126    },
127    paginationChange: function paginationChange(i) {
128      $(this.config.pagination).children().removeClass('is-active');
129      $(this.config.pagination).children().eq(i).addClass('is-active');
130    },
131    paginationClick: function paginationClick() {
132      var _this = this;
133      $(this.config.pagination).on('click', '.p-hero-slide__pagination-item', function (el) {
134        _this.slide.slideToLoop($(el.currentTarget).index());
135      });
136    },
137    resize: function resize() {
138      var _this2 = this;
139      $(window).on('resize', function () {
140        _this2.slide.destroy();
141        _this2.set();
142      });
143    },
144    set: function set() {
145      this.state.slides = $(this.config.item).length;
146      if (this.state.slides <= this.props.slidesPerView) {
147        this.props.autoplay = false;

148        this.props.loop = false;
149        this.props.threshold = 9999;
150        $(this.config.pagination).remove();
151      }
152      this.slide = new Swiper(this.config.elem, this.props);
153      this.slide.init();
154      this.state.init = true;
155    },
156    init: function init() {
157      if (A1P.exist(this.config.elem)) {
158        this.set();
159        this.resize();
160        this.paginationClick();
161      }
162    },
163  };
164
165  var TopSlide = {
166    slide: [],
167    config: {
168      elem: '.js-top-slide',
169      item: '.js-top-slide__item',
170      img: '.js-top-slide__img',
171      nav: {
172        prev: '.js-top-slide__nav--prev',
173        next: '.js-top-slide__nav--next',
174      },
175    },
176    state: {
177      init: false,
178    },
179    props: {
180      init: false,
181      speed: 500,
182      direction: 'horizontal',
183      slidesPerView: 1,
184      spaceBetween: 0,
185      breakpointsInverse: true,
186      threshold: 0,
187      loop: true,
188      loopAdditionalSlides: 1,
189      slideActiveClass: 'is-current',
190      slideNextClass: 'is-next',
191      slidePrevClass: 'is-prev',
192      autoplay: {
193        delay: 5000,
194        disableOnInteraction: false,
195      },
196      768: {
197        slidesPerView: 1,
198      },
199      navigation: {
200        prevEl: '.js-top-slide__nav--prev',
201        nextEl: '.js-top-slide__nav--next',
202      },
203      pagination: {
204        el: '.js-top-slide__pagination',
205        type: 'bullets',
206        bulletElement: 'li',
207        bulletActiveClass: 'is-active',
208        currentClass: 'is-current',
209        clickable: true,
210      },
211      on: {
212        init: function init() {
213          this.update();
214        },
215        slideChange: function slideChange() {},
216      },
217    },
218    set: function set() {
219      var _this3 = this;
220      $(this.config.elem).each(function (i, e) {
221        if ($(_this3.config.item).length <= _this3.props.slidesPerView) {
222          _this3.props.autoplay = false;
223        } else {
224          _this3.props.autoplay = {
225            delay: 5000,
226            disableOnInteraction: false,
227          };
228        }
229        _this3.define(i, e);
230      });
231    },
232    define: function define(i, e) {
233      this.slide[i] = new Swiper(e, this.props);
234      this.slide[i].init();
235      this.state.init = true;
236    },
237    resize: function resize() {
238      var _this4 = this;
239      window.addEventListener('resize', function () {
240        for (var i = 0; i < _this4.slide.length; i++) {
241          _this4.slide[i].update();
242        }
243      });
244    },
245    init: function init() {
246      if (A1P.exist(this.config.elem)) {
247        this.set();
248        this.resize();
249      }
250    },
251  };
252
253  // youtube player
254  var Movie = {
255    player: undefined,
256    config: {
257      id: '',
258      host: location.href,
259      player: {
260        wrap: '.js-movie',
261        area: 'iframe', // id
262      },
263      thumb: '.js-thumb',
264    },
265    state: {
266      script: false,
267    },
268    script: function script() {
269      if (!this.state.script) {
270        var tag = document.createElement('script');
271        tag.src = 'https://www.youtube.com/iframe_api'; // IFrame Player API を読み込む
272        var firstScriptTag = document.getElementsByTagName('script')[0];
273        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
274
275        this.state.script = true;
276      }
277    },
278    controller: function controller() {
279      var _this5 = this;
280      $(this.config.control).on('click', function () {
281        _this5.play();
282      });
283    },
284    thumbnail: function thumbnail() {
285      $(this.config.thumb).each(function (i, e) {
286        var id = $(e).parent().attr('data-id');
287        $(e).attr('style', 'background: url(//i.ytimg.com/vi/'.concat(id, '/maxresdefault.jpg) no-repeat center;background-size: cover;'));
288      });
289    },
290    get: function get(e) {
291      this.config.id = $(e).attr('data-id');
292      this.write();
293    },
294    write: function write() {
295      var _this6 = this;
296      // youtube api のYTが定義されるまでループ
297      // 読み込みに差が生じるため
298      if (typeof YT !== 'undefined' && typeof YT.Player !== 'undefined') {
299        this.set();
300      } else {
301        setTimeout(function () {
302          _this6.write();
303        }, 10);
304      }
305    },
306    reset: function reset() {
307      $(this.config.player.wrap).html('<div id="'.concat(this.config.player.area, '"></div>'));
308    },
309    set: function set() {
310      this.modalPlayer = new YT.Player(this.config.player.area, {
311        videoId: this.config.id,
312        events: {
313          onReady: function onReady(e) {
314            e.target.playVideo();
315          },
316        },
317        playerVars: {
318          rel: 0,
319          loop: 1,
320          playlist: this.config.id,
321          controls: 1,
322          showinfo: 1,
323          disablekb: 1,
324          playsinline: 1,
325          fs: 0,
326          iv_load_policy: 3,
327          modestbranding: 1,
328          html5: 1,
329          host: this.config.host,
330        },
331      });
332    },

333    init: function init() {
334      this.script();
335      this.thumbnail();
336    },
337  };
338
339  var Modal = {
340    config: {
341      elem: '.js-modal',
342      container: '.js-modal__container',
343      inner: '.js-modal__inner',
344      open: '.js-modal__open',
345      close: '.js-modal__close',
346      position: undefined,
347      speed: 500,
348    },
349    state: {
350      type: undefined,
351    },
352    view: function view() {
353      var abs = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
354      if (abs) {
355        this.position();
356        $(this.config.container).css({top: this.config.position});
357      }
358      $(A1P.elements.wrap).addClass('is-modal-open');
359      // $(A1P.elements.wrap).fadeIn(this.config.speed, 'easeOutQuart');
360    },
361    hide: function hide() {
362      // $(A1P.elements.wrap).fadeOut(this.config.speed, 'easeOutQuart');
363      $(A1P.elements.wrap).removeClass('is-modal-open');
364    },
365    scroll: function scroll() {
366      $('html,body').animate(
367        {
368          scrollTop: this.config.position,
369        },
370        0
371      );
372    },
373    position: function position() {
374      this.config.position = window.pageYOffset;
375    },
376    click: function click() {
377      var _this7 = this;
378      $(A1P.elements.wrap).on('click', this.config.open, function (e) {
379        // open event
380        _this7.view();
381        _this7.state.type = $(e.currentTarget).attr('data-modal');
382        _this7.openCallback(e.currentTarget);
383      });
384      $(A1P.elements.wrap).on('click', this.config.close, function (e) {
385        _this7.hide();
386        // close event
387        _this7.state.type = undefined;
388        _this7.closeCallback(e.currentTarget);
389        //this.scroll();
390      });
391    },
392    openCallback: function openCallback(e) {
393      if (this.state.type === 'youtube') {
394        Movie.get(e);
395      }
396    },
397    closeCallback: function closeCallback(e) {
398      setTimeout(function () {
399        Movie.reset();
400      }, 500);
401    },
402    resize: function resize() {
403      var _this8 = this;
404      $(window).on('resize', function () {
405        _this8.position();
406      });
407    },
408    init: function init() {
409      this.click();
410      this.resize();
411    },
412  };
413})();