https://www.segasammy.co.jp/assets/js/components.js

1'use strict';
2
3$(function(){
4
5	/*----------
6	 埋め込み動画
7	 parts/movie/embed
8	----------*/
9	var setEmbed = function(){
10		var $target = $('.js-embed');
11
12		if (!$target.length) return;
13
14		$target.each(function(){
15			var $this = $(this);
16			var $poster = $this.find('.js-embed-poster');
17			var video = $this.find('video').get(0);
18
19			if (!$poster.length) return;
20
21			// サムネイルがあればクリックで再生
22			$poster.on('click', function(){
23				$this.addClass('is-play');
24				video.play();
25			});
26		});
27	}
28
29	/*----------
30	 キービジュアル（スライド）
31	 other/kv/slide
32	----------*/
33	function setSlider (){
34		const $targets = $('.js-slider');
35
36		$targets.each(function(){
37			let slider;
38			const $this = $(this);
39			const timestamp = new Date().getTime();
40			let $autoplayToggle;
41
42			$this.addClass('js-slider-instance-' + timestamp);
43			$this.find('.js-slider-pagination').addClass('js-slider-pagination-' + timestamp);
44			$this.find('.js-slider-next').addClass('js-slider-next-' + timestamp);
45			$this.find('.js-slider-prev').addClass('js-slider-prev-' + timestamp);
46			$this.find('.js-slider-autoplay').addClass('js-slider-autoplay-' + timestamp);
47			$autoplayToggle = $('.js-slider-autoplay-' + timestamp);
48
49			const options = {
50				loop: true,
51				autoplay: {
52					delay: 5000
53				},
54				pagination: {
55					el: '.js-slider-pagination-' + timestamp,
56					bulletClass: 'c-slider__bullet',
57					bulletActiveClass: 'is-active',
58					clickable: true
59				},
60				navigation: {
61					nextEl: '.js-slider-next-' + timestamp,
62					prevEl: '.js-slider-prev-' + timestamp,
63				}
64			}
65
66			slider = new Swiper('.js-slider-instance-' + timestamp + ' .swiper', options);
67
68			$autoplayToggle.on('click', ()=>{
69				if( $autoplayToggle.hasClass('is-paused') ) {
70					slider.autoplay.start();
71					$autoplayToggle.removeClass('is-paused');
72				} else {
73					slider.autoplay.stop();
74					$autoplayToggle.addClass('is-paused');
75				}
76			});
77		});
78	}
79
80	/*----------
81	 開閉ボックス
82	 layout/accordion
83	----------*/
84	function setAccordion (){
85		const $target = $('.js-accordion');
86		$target.each(function(){
87			const $this = $(this);
88			const $trigger = $('.js-accordion-trigger', $this);
89			$trigger.on('click', function(){
90				$this.toggleClass('is-active');
91			});
92		});
93	}
94
95	/*----------
96	 タブ切り換え
97	 link/tab
98	----------*/
99	function setTab (){
100		const $target = $('.js-tab');
101		$target.each(function(){
102			const $this = $(this);
103			const $triggers = $('.c-tab__tab > li', $this);
104			const $contents = $('.c-tab__item', $this);
105
106			$triggers.on('click', (ev)=>{
107				const $trigger = $(ev.currentTarget);
108				const index = $trigger.index();
109				ev.preventDefault();
110				$triggers.removeClass('is-active');
111				$contents.removeClass('is-active');
112				$trigger.addClass('is-active');
113				$contents.eq(index).addClass('is-active');
114			});
115		});
116	}
117
118	/*----------
119	 プルダウンタブ切り換え
120	 link/tab/pulldown
121	----------*/
122	function setTabPulldown (){
123		const $target = $('.js-tab-pulldonw');
124		$target.each(function(){
125			const $this = $(this);
126			const $triggers = $('.c-tab-pulldown__select > select', $this);
127			const $contents = $('.c-tab-pulldown__item', $this);
128
129			$triggers.on('change', (ev)=>{
130				const index = ev.currentTarget.selectedIndex;
131				$contents.removeClass('is-active');
132				$contents.eq(index).addClass('is-active');
133			});
134		});
135	}
136
137	/*----------
138	 プルダウン
139	 other/form/set_pulldown
140	----------*/
141	var setSelect = function(){
142		var $target = $('.js-select');
143
144		$target.each(function(){
145			var $this = $(this);
146			var $select = $this.find('select');
147			const $options = $('option', $select);
148
149			$select.on('change', function(){
150				const $selected = $('option:selected', $select);
151				const dataURL = $selected.attr('data-url');
152				if( dataURL ){
153					location.href = dataURL;
154				}
155			});
156		});
157	}
158
159	/*----------
160	 実行
161	----------*/
162	$(function(){
163		setEmbed();
164		setSlider();
165		setAccordion();
166		setTab();
167		setTabPulldown();
168		setSelect();
169	});
170
171});